<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <script src="../static/layui/layui.js"></script>
    <style>
        .layui-form-selectup dl {
            top: 42px;
            bottom: unset;
        }
    </style>
</head>
<body>


<!--查询表单-->
<form class="layui-form" action="" id="queryform">

    <div class="layui-inline">
        <label class="layui-form-label">关键字</label>
        <div class="layui-inline">
            <input type="text" name="keyword" placeholder="请输入名称或电话" autocomplete="off" class="layui-input">
        </div>
    </div>


    <div class="layui-inline">
        <label class="layui-form-label">状态</label>
        <div class="layui-inline">
            <select name="querystatus" lay-filter="querystatus">
                <option value="全部客户" selected>全部客户</option>
                <option value="流失客户">流失客户</option>
                <option value="开发客户">开发客户</option>
                <option value="潜在客户">潜在客户</option>
                <option value="正式客户">正式客户</option>
                <option value="资源池客户">资源池客户</option>
            </select>
        </div>
    </div>

    <div class="layui-inline">
        <button class="layui-btn" lay-submit lay-filter="query">查询</button>
    </div>
</form>

<!--新增编辑form2-->
<form class="layui-form" id="cuform" style="display: none">

<!--    用于取值ModelAndView的status的值-->
    <input type="text" name="status" th:value="${status}" hidden>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="name" lay-verify="required|name" placeholder="请输入员工名称" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class=""></div>
        <div class="layui-inline">
            <label class="layui-form-label">年龄</label>
            <div class="layui-input-inline">
                <input type="text" name="age" placeholder="请输入年龄" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-inline">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-inline">
                <select name="gander" lay-filter="gander">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>

        </div>


        <div class="layui-inline">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-inline">
                <input type="text" name="tel" placeholder="请输入电话" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-inline">
            <label class="layui-form-label">qq</label>
            <div class="layui-input-inline">
                <input type="text" name="qq" placeholder="请输入qq号" autocomplete="off" class="layui-input">
            </div>
        </div>



        <div class="layui-inline" >
            <label class="layui-form-label">职业</label>
            <div class="layui-inline layui-form" lay-filter="job">
                <select name="job" lay-filter="job">
                </select>
            </div>
        </div>

        <div class="layui-inline" >
            <label class="layui-form-label">创建人</label>
            <div class="layui-inline layui-form" lay-filter="inputUser">
                <select name="inputUser" lay-filter="inputUser">
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-inline">
                <select name="status" lay-filter="status" >
                    <option value="流失客户" >流失客户</option>
                    <option value="开发客户" >开发客户</option>
                    <option value="潜在客户" >潜在客户</option>
                    <option value="正式客户" >正式客户</option>
                    <option value="资源池客户" >资源池客户</option>
                </select>
            </div>
        </div>

    </div>
</form>
<!--跟进记录编辑form2-->
<form class="layui-form" id="traceform" style="display: none">

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input disabled type="text" name="name" lay-verify="required|name" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class=""></div>
        <div class="layui-inline">
            <label class="layui-form-label">跟进内容</label>
            <div class="layui-input-inline">
                <input type="text" name="traceDetails" placeholder="请输入跟进内容" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-inline" >
            <label class="layui-form-label">跟进方式</label>
            <div class="layui-inline layui-form" lay-filter="traceType">
                <select name="traceType" lay-filter="traceType">
                </select>
            </div>
        </div>


        <div class="layui-inline">
            <label class="layui-form-label">跟进结果</label>
            <div class="layui-input-inline">
                <input type="text" name="traceResult" placeholder="请输入跟进结果" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-inline" >
            <label class="layui-form-label">跟进类型</label>
            <div class="layui-inline" >
                <select name="type" lay-filter="type">
                    <option value="潜在客户">潜在开发</option>
                    <option value="正式客户">正式跟进</option>
                </select>
            </div>
        </div>


    </div>
</form>

<!--移交form-->
<form class="layui-form" id="moveform" style="display: none">

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input disabled type="text" name="name" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class=""></div>
        <div class="layui-inline">
            <label class="layui-form-label">旧销售人员</label>
            <div class="layui-input-inline">
                <input type="text" name="oldSeller" autocomplete="off" class="layui-input" disabled>
            </div>
        </div>


        <div class="layui-inline" >
            <label class="layui-form-label">新销售人员</label>
            <div class="layui-inline layui-form" lay-filter="newSeller">
                <select name="newSeller" lay-filter="newSeller">
                </select>
            </div>
        </div>


        <div class="layui-inline">
            <label class="layui-form-label">移交原因</label>
            <div class="layui-input-inline">
                <textarea name="transReason" placeholder="请输入...." class="layui-textarea"></textarea>
            </div>
        </div>


    </div>
</form>

<!--table-->
<table class="layui-hide" id="cutable" lay-filter="cutable"></table>


<!--右侧工具-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs " lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="trace">跟进</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="move">移交</a>
</script>

<!--头部工具栏-->
<script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add">新增</button>
        </div>
</script>


<script type="text/javascript">

    layui.use(['table','form','jquery','layer'],function () {

        var table=layui.table;
        var form=layui.form;
        var $=layui.jquery;
        var layer=layui.layer;


        var status=$("#cuform").find('input[name="status"]').val();

        // 设置状态下拉框默认选中值
        if(status!=null&&status!=""){
            $("#queryform option[value="+status+"]").prop("selected","selected");
            //刷新select
            form.render('select');
        }

        table.render({
            elem: '#cutable'
            , url: '/customer/list'+'?status='+status
            , toolbar:'#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar:[]
            , title: '顾客数据表'
            , cols: [
                [
                {type: 'numbers', title: '编号',align: 'center'}
                ,{field: 'name', title: '姓名', edit: 'text',align: 'center'}
                ,{field: 'age', title: '年龄', edit: 'text',align: 'center'}
                ,{field: 'gander', title: '性别', edit: 'text',align: 'center'}
                ,{field: 'tel', title: '电话', edit: 'text',align: 'center'}
                ,{field: 'qq', title: 'QQ', edit: 'text',align: 'center'}
                ,{field: 'status', title: '状态', edit: 'text',align: 'center'}
                ,{field: 'inputTime', title: '创建时间', edit: 'text',align: 'center'}
                ,{field: 'dl',title: '职业',align: 'center',templet:function (d) {
                        var res='';
                        if (d.dl!=null){
                            res=d.dl.title;
                        }
                        return res;
                    }}
                ,{field: 'inputUser',title: '创建人',align: 'center',templet:function (d) {
                    var res='';
                    if (d.inputUser!=null){
                        res=d.inputUser.name;
                    }
                    return res;
                }}
                ,{field: 'right' ,title: '操作', toolbar:'#barDemo',align: 'center',width:200}


            ]
            ]
            ,request:{
                pageName: 'currentPage',
                limitName: 'PageSize'
            }
            ,parseData:function (res) {
                return{
                    "code":0,
                    "msg":res.msg,
                    "count":res.data.totalConut,
                    "data":res.data.data
                }
            }
            ,page:true

        });

        // // 部门下拉方法
        // function deptSelectRender(formid){
        //     $.ajax({
        //         url:'/ssm/department/list',
        //         type: 'get',
        //         dataType:'json',
        //         success:function (res) {
        //             var data=res.data;
        //             $.each(data,function (index,el) {
        //                 var node='<option value="'+el.id+'">'+el.name+'</option>';
        //                 $("#"+formid).find('select').append(node);
        //             });
        //             form.render('select')
        //         }
        //     })
        // };


        function Selectjob(formid,dmname){


            if(dmname=="职业"){
                $.ajax({
                    url:'/customer/getDdetail',
                    type:'get',
                    dataType:'json',
                    data:{

                        "dmname":dmname,

                    },
                    success:function (res) {
                        var data=res.data;
                        console.log(data);
                        $.each(data,function (index,job) {
                            console.log(job.title);
                            var node='<option value="'+job.id+'">'+job.title+'</option>';
                            $("#"+formid).find('select[name="job"]').append(node);
                        });
                        form.render('select','job');
                    }
                })
            }else {
                $.ajax({
                    url:'/employee/listAll',
                    type:'get',
                    dataType:'json',
                    data:{
                    },
                    success:function (res) {
                        var data=res.data;
                        console.log(data);
                        $.each(data,function (index,emp) {
                            var node='<option value="'+emp.id+'">'+emp.name+'</option>';
                            $("#"+formid).find('select[name="inputUser"]').append(node);
                        });
                        form.render('select','inputUser');
                    }
                })
            }
        }

        function SelectjtraceType(formid,dmname){
            $.ajax({
                url:'/tracehistory/getDdetail',
                type:'get',
                dataType:'json',
                data:{

                    "dmname":dmname,

                },
                success:function (res) {
                    var data=res.data;
                    console.log(data);
                    $.each(data,function (index,traceType) {
                        console.log(traceType.title);
                        var node='<option value="'+traceType.id+'">'+traceType.title+'</option>';
                        $("#"+formid).find('select[name="traceType"]').append(node);
                    });
                    form.render('select','traceType');
                }
            })
        }


        function selectEmpToMove(){
            $.ajax({
                url:'/employee/listAll',
                type:'get',
                dataType:'json',
                data:{
                },
                success:function (res) {
                    var data=res.data;
                    $.each(data,function (index,emp) {
                        var node='<option value="'+emp.id+'">'+emp.name+'</option>';
                        $('#moveform').find('select[name="newSeller"]').append(node);
                    });
                    form.render('select','newSeller');
                }
            })
        }
        // Selectjob("cuform","职业");

        // 查询提交
        form.on('submit(query)',function (data) {
            // console.log(data.field);
            table.reload('cutable',{
                where:data.field,
                page:{
                    curr:1,
                }
            })
            return false;
        })

        table.on('tool(cutable)',function (obj) {
            var layevent=obj.event;
            var data=obj.data;
            var tr=obj.tr;

            var dlid=data.dl.id;
            var id=data.id;
            var name=data.name;
            var age=data.age;
            var gander=data.gander;
            var tel=data.tel;
            var qq=data.qq;



            if(layevent=="edit"){
                $("#cuform").find('select[name="inptUser"]').attr("disabled","disabled");

                layer.open({
                    title:"编辑客户信息",
                    type:1,
                    content:$("#cuform"),
                    area:['500px','500px'],
                    btn:['保存','重置'],
                    btn1:function () {

                        $.ajax({//update
                            url:'/customer/upOrin',
                            type:'post',
                            dataType:'json',
                            data:{
                                "id":id,
                                "name":$("#cuform").find('input[name="name"]').val(),
                                "age":$("#cuform").find('input[name="age"]').val(),
                                "gander":$("#cuform").find('select[name="gander"]').val(),
                                "tel":$("#cuform").find('input[name="tel"]').val(),
                                "qq":$("#cuform").find('input[name="qq"]').val(),
                                "dlid":$("#cuform").find('select[name="job"]').val(),
                                "status":$("#cuform").find('select[name="status"]').val(),
                            },
                            success:function (res) {
                                layer.closeAll('page');
                                layer.msg(res.msg);
                                $("#cuform").find('input').val('');
                                $("#cuform").find('select[name="job"]').empty();
                                $("#cuform").find('select[name="inputUser"]').empty();
                                table.reload('cutable',{});
                            }
                        })
                    },
                    btn2:function(){
                        $("#cuform").find('input[name="name"]').val(name);
                        $("#cuform").find('input[name="age"]').val(age);
                        $("#cuform").find('input[name="tel"]').val(tel);
                        $("#cuform").find('input[name="qq"]').val(qq);
                        $("#cuform").find('select[name="gander"]').reset();
                        $("#cuform").find('select[name="job"]').reset();
                        $("#cuform").find('select[name="inputUser"]').reset();
                    },
                    success:function () {
                        Selectjob('cuform','职业');
                        Selectjob('cuform','员工');
                        $("#cuform").find('input[name="name"]').val(name);
                        $("#cuform").find('input[name="age"]').val(age);
                        $("#cuform").find('input[name="tel"]').val(tel);
                        $("#cuform").find('input[name="qq"]').val(qq);

                    },
                    cancel:function () {
                        $("#cuform").find('input').val('');
                        $("#cuform").find('select[name="job"]').empty();
                        $("#cuform").find('select[name="inputUser"]').empty();

                    }

                })
            }

            if(layevent=="trace"){


                layer.open({
                    title:"跟进信息",
                    type:1,
                    content:$("#traceform"),
                    area:['500px','500px'],
                    btn:['保存','重置'],
                    btn1:function () {

                        $.ajax({//update
                            url:'/tracehistory/upOrin',
                            type:'post',
                            dataType:'json',
                            data:{
                                "customerid":id,
                                "traceDetails":$("#traceform").find('input[name="traceDetails"]').val(),
                                "traceResult":$("#traceform").find('input[name="traceResult"]').val(),
                                "type":$("#traceform").find('select[name="type"]').val(),
                                "traceType.id":$("#traceform").find('select[name="traceType"]').val(),
                            },
                            success:function (res) {
                                layer.closeAll('page');
                                layer.msg(res.msg);
                                $("#traceform").find('input').val('');
                                $("#traceform").find('select[name="type"]').empty();
                                $("#traceform").find('select[name="traceType"]').empty();
                                table.reload('cutable',{});
                            }
                        })
                    },
                    btn2:function(){
                        $("#traceform").find('input').val('');
                        $("#traceform").find('select[name="type"]').reset();
                        $("#traceform").find('select[name="traceType"]').reset();
                    },
                    success:function () {
                        SelectjtraceType('traceform','跟进方式')
                        $("#traceform").find('input').val('');
                        $("#traceform").find('input[name="name"]').val(name);

                    },
                    cancel:function () {
                        $("#traceform").find('input').val('');
                        $("#traceform").find('select[name="traceType"]').empty();


                    }

                })
            }
            if(layevent=="move"){
                layer.open({
                    title:"移交信息",
                    type:1,
                    content:$("#moveform"),
                    area:['500px','500px'],
                    btn:['保存','重置'],
                    btn1:function () {

                        $.ajax({//update
                            url:'/trans/insert',
                            type:'post',
                            dataType:'json',
                            data:{
                                "cu.id":id,
                                "oldSeller.id":data.inputUser.id,
                                "newSeller.id":$("#moveform").find('select[name="newSeller"]').val(),
                                "transReason":$("#moveform").find('textarea[name="transReason"]').val(),
                            },
                            success:function (res) {
                                layer.closeAll('page');
                                layer.msg(res.msg);
                                $("#moveform").find('input').val('');
                                $("#moveform").find('textarea').val('');
                                $("#moveform").find('select[name="newSeller"]').empty();
                                table.reload('cutable',{});
                            }
                        })
                    },
                    btn2:function(){
                        $("#moveform").find('input').val('');
                        $("#moveform").find('textarea').val('');
                        $("#moveform").find('select[name="newSeller"]').reset();
                    },
                    success:function () {
                        selectEmpToMove();
                        $("#moveform").find('input[name="name"]').val(name);
                        $("#moveform").find('input[name="oldSeller"]').val(data.inputUser.name);

                    },
                    cancel:function () {
                        $("#moveform").find('input').val('');
                        $("#moveform").find('textarea').val('');
                        $("#moveform").find('select[name="newSeller"]').empty();


                    }

                })
            }
        })

        table.on('toolbar(cutable)',function (obj) {
            var layevent=obj.event;
            //var checkStatus=table.checkStatus('emtable');

            if(layevent=="add"){
                layer.open({
                    title:'新增客户信息',
                    traditional:true,
                    contentType: "application/json",
                    type:1,
                    content:$("#cuform"),
                    area:['500px','500px'],
                    btn: ['保存','重置'],
                    btn1:function () {
                        var name = $("#cuform").find('input[name="name"]').val();
                        var age = $("#cuform").find('input[name="age"]').val();
                        var tel = $("#cuform").find('input[name="tel"]').val();
                        var qq = $("#cuform").find('input[name="qq"]').val();
                        var gander = $("#cuform").find('select[name="gander"]').val();
                        var dlid = $("#cuform").find('select[name="job"]').val();
                        var status=$("#cuform").find('select[name="status"]').val();
                        var inputUser_id=$("#cuform").find('select[name="inputUser"]').val();

                        $.ajax({
                            url:'/customer/upOrin',
                            type:'post',
                            dataType:'json',
                            data:{
                                "name":name,
                                "age":age,
                                "tel":tel,
                                "qq":qq,
                                "gander":gander,
                                "dlid":dlid,
                                "status":status,
                                "inputUser.id":inputUser_id,
                            },
                            success:function (res) {
                                if(res.success){
                                    layer.closeAll('page');
                                    layer.msg(res.msg);
                                    $("#cuform").find("input").val('');
                                    $("#cuform").find('select[name="job"]').empty();
                                    $("#cuform").find('select[name="inputUser"]').empty();
                                    table.reload('cutable',{});

                                }

                            }
                        })
                    },
                    btn2:function () {
                        $("#cuform").find("input").val('');
                        $("#cuform").find("select").reset();
                    },
                    success:function () {
                        Selectjob("cuform","职业");
                        Selectjob("cuform","员工");
                    },
                    cancel:function () {
                        $("#cuform").find("input").val('');
                        $("#cuform").find('select[name="job"]').empty();
                        $("#cuform").find('select[name="inputUser"]').empty();


                    }
                })
            }

        })
    })
</script>

</body>
</html>